<template>
  <Input v-model="searchValue" placeholder="请输入关键字" clearable @on-change="searchChange" />

  <el-tree
    ref="treeRef"
    :data="departmentTree"
    default-expand-all
    :props="{
      children: 'children',
      label: 'name'
    }"
    :expand-on-click-node="false"
    highlight-current
    :filter-node-method="filterNode"
    :current-node-key="0"
    node-key="id"
    @node-click="treeSelected"
  />
</template>

<script setup>
import {
  ref,
  onMounted,
  getCurrentInstance,
  inject,
  watch,
  nextTick
} from 'vue'

import { organList } from '@/api/modules/department'
import { listToTree } from '@/util/index';

import { ElTree } from 'element-plus'
// import 'element-plus/theme-chalk/el-tree.css'

const emit = defineEmits(['selected'])

const departmentTree = ref([
  {
    name: '组织机构',
    id: 0,
    children: []
  }
])

const searchValue = ref('')
const treeRef = ref(null)

const getOrganList = () => {
  organList().then(
    ({ data }) => {
      departmentTree.value[0].children = listToTree(data)
    }
  )
}

const searchChange = () => {
  treeRef.value.filter(searchValue.value)
}

const treeSelected = (node) => {
  emit('selected', node)
}

const filterNode = (value, data) => {
  if (!value) return true

  return data.name.includes(value)
}

onMounted(() => {
  getOrganList()
})

defineExpose({
  getOrganList
})
</script>

<style scoped lang="scss">
.el-tree{
  margin-top: 16px;
  height: calc(100% - 94px);
  overflow-y: auto;
  :deep() {
    color: #515a6e;
    
    .is-current >.el-tree-node__content{
      color: #4a8ae9;
    }
  }
  
}
</style>
